<template>
  <div class="demo">
    <div class="left">
      <div class="left_top"><input type="text" value="请输入地址" v-model="address" @click="leftDown"></div>
      <!-- 这个类名选择，条件选择show，left_list一直有 -->
      <ul :class="{ 'show': leftListShow,'left_list':true}">
          <!-- 这里的dataShow是后台的参数，你自己可以用你获取的参数-->
          <!-- 每个li都绑定点击事件来触发右边的窗口 -->
        <li v-for="(item,index) in dataShow" @click="clickLeftOther($event)">{{item.Address}}</li>
      </ul>
    </div>
    <!-- 右边这个和左边的差不多 -->
    <div class="right">
      <div class="right_top" @click="right_down"><input type="text" v-model="name"></div>
      <ul :class="{ 'show': rightListShow,'right_list':true}">
        <li v-for="item in dataShow"  @click="clickRightOther($event)">{{item.Name}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
  import api from './../axios/api.js'
  export default {
    name: 'Mock',
    data() {
      return {
        dataShow: [],
        leftListShow: false,
        rightListShow: false,
        address:'请输入地址',
        name:'请输入姓名'
      }
    },
    created() {
      this.getdata()
    },
    methods: {
      // 请求参数
      getdata: function () {
        api.mockdata('/data/index')
          .then(res => {
            console.log(res);
            this.dataShow = res;
            // console.log(this.dataShow,111)
          })
      },
    //   左边下拉
      leftDown() {
        //   console.log(1)
        if (!this.leftListShow) {
          this.leftListShow = true;
        } else {
          this.leftListShow = false;

        }
      },
    //   右边下拉
      right_down() {
        if (!this.rightListShow) {
          this.rightListShow = true;
        } else {
          this.rightListShow = false;
        
        }
      },
    //   左边触发右边点击下拉事件
      clickLeftOther(e) {
          console.log()
        this.right_down();
        this.address = e.currentTarget.innerHTML;
        this.leftListShow = false;
      },
      clickRightOther(e){
          this.name = e.currentTarget.innerHTML;
          this.rightListShow = false;
      }
    }
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  ul,
  li {
    list-style: none;
    cursor: pointer;

  }

  input {
    cursor: pointer;
  }

  .demo {
    display: flex
  }
/* 先让他们隐藏 */
  .left_list {
    display: none;
  }
/* 先让他们隐藏 */
  .right_list {
    display: none;
  }

  .demo .show {
    display: block;
  }

</style>
